<template>
  <Card>
    <div class="md:flex">
      <div :id="props.conditionName" style="width: 800%; height: 250%"></div>
    </div>
  </Card>
</template>

<script setup lang="ts">
import { Card } from 'ant-design-vue';
import { watch } from 'vue';
import * as echarts from 'echarts';
import { QueryBatchMetricsConditionReq } from '/@/api/maintenance-center/skywalking/dashboard/model/apmModel';
import { getBatchMetricsValues } from '/@/api/maintenance-center/skywalking/dashboard/apm';
import { batchMetricsMap } from '../dashboard/apm/apm.data';

const props = defineProps([
  'page',
  'start',
  'end',
  'step',
  'conditionName',
  'serviceName',
  ' serviceInstanceName',
  'endpointName',
]);

/* eslint-disable */
let barChartName = props.conditionName;

var option;
function ifDateUndefined(start: string, end: string, step: string) {
  let isStartUndefined = start == '' || start === null || start == undefined;
  let isEndUndefined = end == '' || end === null || end == undefined;
  let isStepUndefined = step == '' || step === null || step == undefined;
  if (isStartUndefined || isEndUndefined || isStepUndefined) {
    return true;
  }
  return false;
}
watch(
  () => [
    props.page,
    props.start,
    props.end,
    props.step,
    props.serviceName,
    props.serviceInstanceName,
    props.endpointName,
    props.conditionName,
  ],
  (val) => {
    if (!ifDateUndefined(val[1], val[2], val[3])) {
      let page = val[0];
      let serviceName = val[4];
      let serviceInstanceName = val[5];
      let endpointName = val[6];
      let conditionName = val[7];

      let queryMetricsConditionReq: QueryBatchMetricsConditionReq = {
        duration: {
          start: val[1],
          end: val[2],
          step: val[3],
        },
        names: batchMetricsMap[page][conditionName].names,
        entity: {
          normal: true,
          scope: batchMetricsMap[page][conditionName].scope,
          serviceName: serviceName,
        },
      };

      if (
        serviceInstanceName !== null &&
        serviceInstanceName != undefined &&
        serviceInstanceName != ''
      ) {
        queryMetricsConditionReq.entity.serviceInstanceName = serviceInstanceName;
      }

      if (endpointName !== null && endpointName != undefined && endpointName != '') {
        queryMetricsConditionReq.entity.endpointName = endpointName;
      }

      getBatchMetricsValues(queryMetricsConditionReq).then((res) => {
        let times = res.times;
        let values = res.values;

        let stackedBarSeries: any[] = [];
        let labels: string[] = [];

        for (var key in values) {
          if ({}.hasOwnProperty.call(values, key)) {
            labels.push(key);
            stackedBarSeries.push({
              name: key,
              data: values[key],
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series',
              },
            });
          }
        }

        let lineChartDom = document.getElementById(barChartName);
        let myChart = echarts.init(lineChartDom);

        option = {
          title: {
            text: batchMetricsMap[page][conditionName].title,
            textStyle: {
              color: '#666666',
              fontWeight: 'lighter',
              fontSize: 13,
            },
          },
          grid: {
            top: '25%',
            left: '3%',
            right: '8%',
            bottom: '3%',
            containLabel: true,
          },
          legend: {
            show: true,
            type: 'scroll',
            orient: 'horizontal',
            itemHeight: 6,
            top: 20,
            left: -5,
            textStyle: {
              fontSize: 10,
            },
            data: labels,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          xAxis: {
            type: 'category',
            data: times,
          },
          yAxis: {
            type: 'value',
          },
          series: stackedBarSeries,
        };
        option && myChart.setOption(option);
      });
    }
  },
  { immediate: true, deep: true }
);
</script>
